<template>
    <div>
        <div class="uploadBox ml20">
            <!--<el-button @click="preview"
                       class="btnDefault mr10"
                       v-if="type==='button'">预览</el-button>-->
            <img src="../../assets/images/watch.png" alt=""  v-if="type==='button'&&currentImg" @click="preview" class="mr20">
            <el-upload ref="upload"
                       :limit="1"
                       class="avatar-uploader"
                       :show-file-list="false"
                       :action="uploadInfo.url"
                       :data="{sysId:'SYS_51117169316bd0e8aefcf9232d69e539'}"
                       name="files"
                       :before-upload="beforeUpload"
                       :on-success="uploadSuccess"
                       :on-error="uploadError">
                <div class="detailImg"
                     :style="{width:(type==='img'?widthImg:'auto'),height:(type==='img'?heightImg:'auto')}">
                    <!-- <el-button v-if="type==='button'" class="btnDefault"
                                type="primary"
                                >上传</el-button>-->
                    <img src="../../assets/images/upload.png" alt="" v-if="type==='button'" >
                    <div class="boxBorder"
                         :style="{width:widthImg,height:heightImg}"
                         v-if="type==='img'&&!currentImg">
                        <i class="el-icon-plus"></i>
                    </div>
                    <img v-if="type==='img'&&currentImg"
                         class=""
                         :src="currentImg"
                         :style="{width:widthImg,height:heightImg,borderRadius:round?'50%':'4px'}" />
                    <!--<div class="shadow"-->
                    <!--v-if="currentImg">-->
                    <!--<i class="el-icon-delete danger iconSpan  cursor font14"-->
                    <!--@click.stop="clearImg(index)"></i>-->
                    <!--<i class="el-icon-search iconSpan  cursor font14"-->
                    <!--@click.stop="preview"-->
                    <!--style="margin-top:8px"-->
                    <!--v-if="type==='img'&&currentImg"></i>-->
                    <!--&lt;!&ndash;<el-button @click.stop="currentImg=''"><i class="el-icon-delete"></i></el-button>&ndash;&gt;-->
                    <!--</div>-->
                </div>
            </el-upload>
        </div>

        <transition enter-active-class="zoomIn"
                    leave-active-class="zoomOut"
                    v-if="currentImgShow">
            <div class="imgModal"
                 @click="cancelPreview">
                <img :src="currentImg"
                     alt="">
            </div>
        </transition>
    </div>

</template>

<script>
  // import "animate.css"
  import axios from 'axios'
  export default {
    props: {
      uploadInfo: {
        type: Object,
        default () {
          return {
            url: '',
            width: '',
            height: '',
            uploadData:{
              sysId:'SYS_51117169316bd0e8aefcf9232d69e539'
            }
          }
        }
      },
      type: {
        type: String,
        default: 'button'
      },
      currentImg: {//点击图片上传、默认图片
        type: String,
        default: ''
      },
      widthImg: {
        type: String,
        default: '78px'
      },
      heightImg: {
        type: String,
        default: '78px'
      },
      round: {
        type: Boolean,
        default: false
      },
      index:{
        type:Number,
        default:-1
      }
    },
    data () {
      return {
        currentImgShow: false,
        header: {},

      }
    },
    computed: {

    },
    mounted () {
      this.header.token = sessionStorage.getItem('token')
      this.uploadInfo.url=JSON.parse(localStorage.getItem('baseJson')).uploadUrl+'/file-rest/api/businessSystem/uploadFile'
    },
    methods: {
      clearImg(){
        if(this.index===-1){
          // this.currentImg=''
          this.$emit('uploadSuccess', '')
        }else{
          this.$emit('delImgFromList',this.index)
        }
      },
      //上传图片
      beforeUpload (file) {//上传之前
        this.$emit('beforeUpload', true)
        let type='';
        let flag=false
        if(file&&file.type){
          type=file.type ;
         flag= ( type === 'application/vnd.ms-excel'||
           type ===     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||
          type === 'application/msword'||
           type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
        }else{
          type=file.name.split('.')[1]
          flag=(type=='doc'||type=='docx'||type=='xls'||type=='xlsx')
        }
        if (!flag ) {
          this.$emit('beforeUpload', false);
          this.$message({
            message: '上传文件必须是excel和word格式！',
            type: "warning"
          })
        }else{
          this.$store.state.loadingFlag=true
        }
        return (flag)
      },
      uploadSuccess (res, file, fileList) {
        this.$store.state.loadingFlag=false
        if (res.success) {
          // this.currentImg = res.data
          this.$message({
            message: res.message,
            type: "success"
          })
          this.$refs.upload.clearFiles()
          this.$emit('uploadSuccess', res.data[0])
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          })
          this.$emit('uploadError', false)
        }
      },
      // 上传错误
      uploadError (res, file, fileList) {
        this.$refs.upload.clearFiles()
        this.$emit('uploadError', false)
      },
      preview () {
        this.currentImgShow = true
      },
      cancelPreview () {
        this.currentImgShow = false
      }
    },

    components: {},
  }
</script>


<style scoped lang="less">
    .avatar-uploader {
        display: flex;
        justify-content: center;
        .avatar {
            width: 78px;
            height: 78px;
            border-radius: 50%;
        }
    }
    .uploadBox {
        display: flex;
        justify-content: flex-start;
        align-items: center !important;
    }
    .boxBorder {
        border: 1px dashed #c0c4cc;
        border-radius: 4px;
        display: flex;
        justify-content: center !important;
        align-items: center !important;
    }
    .imgModal {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999999;
        background: rgba(0, 0, 0, 0.3);
        img {
            max-width: 80%;
            max-height: 80%;
        }
    }
    .detailImg {
        position: relative;
        img {
            border-radius: 3px;
        }
    }
    .shadow {
        display: none;
    }
    .detailImg:hover .shadow {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        background-color: rgba(24, 24, 24, 0.5);
        text-align: center;
        border-radius: 4px;
        flex-direction: column;
        .el-button {
            background-color: rgba(183, 191, 182, 0.5);
            color: #fff;
            padding: 0px 2px;
        }
        .iconSpan {
            display: inline-block;
            padding: 4px 4px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
        }
    }
</style>
